<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../商城相关/js/jq.js"></script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.container {
				background: black;
				position: relative;
				border: 1px solid #ddd;
				width: 1000px;
				height: 800px;
			}

			.sparkLine {
				position: absolute;
				transform-origin: left top;

			}

			.sparkLine .sparkParticle {
				width: 1px;
				height: 1px;
				float: left;
				color: white;
				background: white;
				box-shadow: 0 0 10px white;
				opacity: 0;
			}

			@keyframes fade {
				0% {
					opacity: 0;
				}

				50% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			.sparkLine .sparkParticle {}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="sparkLine" style="">
				<div class="sparkParticle"></div>
			</div>
		</div>

		<script type="text/javascript">
			function createLine(num, color, width, height, speed, left, top, deg) {
				//粒子数（px），颜色，宽度，高度，速度，位置左，位置右，角度
				var $sparkLine = $('<div class="sparkLine"></div>');
				$sparkLine.css("top", top);
				$sparkLine.css("left", left);
				$sparkLine.css("height", height);
				$sparkLine.css("transform", ' rotateZ(' + deg + 'deg)');
				for (var i = 0; i < num; i++) {
					var $sparkParticle = $('<div class="sparkParticle"></div>');
					$sparkParticle.css("-webkit-animation", "fade " + speed + "s " + i / 100 + "s infinite");
					$sparkParticle.css("width", width);
					$sparkParticle.css("height", height);
					$sparkParticle.css("background", color);
					$sparkLine.append($sparkParticle)
				}
				$(".container").append($sparkLine)
			}
			//创建线
			createLine(200, 'red', 2, 2, 1, 20, 20, 30);
			createLine(200, 'white', 2, 2, 1, 20, 20, 90);
		</script>
	</body>
</html>
